<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plg/layui/css/layui.css">
    <link rel="stylesheet" href="/static/admin/css/admin.css">
    <link rel="stylesheet" href="/static/admin/layer/files/css/main.css">
</head>
<body>
    <div class="layer_files_box" id="layer_files_box">

    </div>
    <script src="/static/plg/jquery/jquery-3.3.1.min.js"></script>
    <script src="/static/plg/layui/layui.all.js"></script>
    <script src="/static/admin/js/admin.js"></script>
    <!--//图片渲染模板-->
    <script id="tpl" type="text/html">
        <div class="ht ovh">
            <div class="pages fl">
                <ul class="json_pages" id="json_pages">
                    {{#  if(d.list.current_page > 1){ }}
                    <li><span class="layui-btn layui-btn-xs layui-btn-primary prepage" onclick="files_data.jumppage({{ d.list.current_page-1 }})"><i class="layui-icon">&#xe603;</i></span></li>
                    {{#  } }}
                    <li><span class="current_page">{{ d.list.current_page }}</span> / <span class="last_page">{{ d.list.last_page }}</span></li>
                    {{#  if(d.list.current_page < d.list.last_page){ }}
                    <li><span class="layui-btn layui-btn-xs layui-btn-primary nextpage" onclick="files_data.jumppage({{ d.list.current_page+1 }})"><i class="layui-icon">&#xe602;</i></span></li>
                    {{#  } }}
                    <li><input type="text" id="jumpnum"></li>
                    <li><span class="layui-btn layui-btn-xs layui-btn-primary nextpage" onclick="files_data.jumppage()">跳转</span></li>
                </ul>
            </div>
            <div class="up fr">
                <button type="button" class="layui-btn  layui-btn-sm upfile" upmode="1" category="0">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="hd">
            {{#  layui.each(d.list.data, function(index, item){ }}
            <div class="item" onclick="files_data.toselect(this)" data-id="{{ item.id }}" data-path="{{ item.path }}">
                <div class="thumb {{#  if(files_data.is_selected(item.id) != -1){ }}cur{{#  } }}"><img src="{{ item.path }}" alt=""> <p class="selected"><i class="layui-icon"></i></p></div>
                <div class="name">{{ item.name }}</div>
            </div>
            {{#  }); }}

        </div>
        <div class="hb">
            <div class="select_tips fl">已选<span class="selectedtotal">{{ d.selecteds.length }}</span>个</div>
            <div class="select_check">
                <span class="layui-btn {{#  if(d.selecteds.length === 0){ }}layui-btn-disabled{{#  } }} select_quren" onclick="files_data.quren()">确认</span>
                <span class="layui-btn layui-btn-primary" onclick="files_data.closelayer()">取消</span>
            </div>
        </div>

    </script>
    <script>
        var index = parent.layer.getFrameIndex(window.name),
            files_data = {
                list: [],
                page:1,
                selecteds:[],
                selected_ids: [],
                tpl: tpl.innerHTML,
                view: document.getElementById('layer_files_box'),
                closelayer: function () {
                    parent.layer.close(index)
                },
                getFiles: function () {
                    var _that = this;
                    $.ajax({
                        type: 'get',
                        data: {
                            page:this.page,
                            kw: this.kw
                        },
                        url: '{:url("admin/Layer/getfiles")}',
                        success: function (res){
                            _that.list = res;
                            _that.render();
                            _that.upfile();//初始化一下上传

                        }
                    })
                },
                render: function () {
                    console.log('render了')
                    _that = this;
                    laytpl(this.tpl).render(_that, function(html){
                        _that.view.innerHTML = html;
                    });

                },
                jumppage: function (page) {

                    var _page = page? page :$('#jumpnum').val();
                    if(_page > this.list.last_page){

                        parent.layer.msg('请输入正确页码', {
                            time: 1000
                        });
                    }else{
                        this.page = _page;
                        this.getFiles();
                    }

                },
                quren: function () {

                    if(this.selecteds.length === 0){
                        layer.msg('请至少选择一张图');
                        return false
                    };
                    parent.layera_dmin_files_options._callback(this.selecteds);
                    this.closelayer();
                },
                toselect: function (ele) {;
                    var _list = {
                        id: $(ele).data('id'),
                        path: $(ele).data('path')
                    };

                    if(parent.layera_dmin_files_options._select_type == 1){
                        this.selected_push(_list);
                        this.quren();
                    }

                    if(parent.layera_dmin_files_options._select_type == 2){
                        if(this.is_selected(_list.id) != -1){
                            this.delete_selected(_list.id);
                            this.render()
                        }else{
                            this.selected_push(_list);
                            this.render()
                        }
                        console.log(this.selected_ids);
                    }



                },

                selected_push: function (list) {
                    this.selecteds.push(list)
                    this.toselected_ids();

                },

                toselected_ids : function () {
                    this.selected_ids = [];
                    var that =this;
                    this.selecteds.forEach(function (item, index) {
                        that.selected_ids.push(item.id);
                    })
                },


                remove: function (from, to) {
                    var rest = this.selecteds.slice((to || from) + 1 || this.selecteds.length);
                    this.selecteds.length = from < 0 ? this.selecteds.length + from : from;
                    this.selecteds.push.apply(this.selecteds, rest);
                },

                delete_selected: function (id) {
                    var _that = this;
                    this.selecteds.forEach(function (item,index) {
                        if(item.id == id){
                            console.log('index是'+index)
                            _that.remove(index);
                        }
                    })
                    this.toselected_ids();
                },

                is_selected: function (id) {

                    return $.inArray(id, this.selected_ids);
                },




                upfile: function () {
                    var _that = this;
                    var uploadInst = upload.render({
                        elem: '.upfile' //绑定元素
                        ,multiple: true
                        ,url: '/admin/files/up' //上传接口
                        ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                            layer.load(1, {
                                shade: [0.1,'#fff'] //0.1透明度的白色背景
                            });
                        }
                        ,done: function(res){
                            //上传完毕回调

                        }
                        ,allDone: function(obj){ //当文件全部被提交后，才触发
                            layer.closeAll('loading');
                            if(obj.aborted == 0){
                                layer.msg('全部上传成功', {
                                    time: 1000
                                }, function () {
                                    _that.getFiles();
                                })
                            }else{
                                layer.msg('上传失败'+ obj.aborted, {
                                    time: 1000
                                }, function () {

                                    _that.getFiles();
                                })
                            }
                        }
                        ,error: function(){
                            //请求异常回调
                        }
                    });
                }
            };
        files_data.getFiles()
    </script>

</body>
</html>